<template>
  <div class="side-bar">
    <b-button
      id="add-node-type"
      class="btn"
      size="sm"
      :variant="'outline-primary'"
      squared
      @click="openAddNodeTypeModal"
      v-if="currentType === '节点类型'"
    >
      <i class="el-icon-plus"></i>
      <b-tooltip target="add-node-type" placement="right">添加节点类型</b-tooltip>
    </b-button>
    <b-button
      id="add-relation-type"
      class="btn"
      size="sm"
      :variant="'outline-primary'"
      squared
      v-else
      @click="openAddRelationTypeModal"
    >
      <i class="el-icon-plus"></i>
      <b-tooltip target="add-relation-type" placement="right">添加关系类型</b-tooltip>
    </b-button>

    <b-button
      id="node-type"
      class="btn"
      size="sm"
      :variant="currentType === '节点类型' ? 'primary' : 'outline-primary'"
      squared
      @click="clickNodeType('节点类型')"
    >
      <i class="el-icon-cpu"></i>
      <b-tooltip target="node-type" placement="right">节点类型</b-tooltip>
    </b-button>
    <b-button
      id="relation-type"
      class="btn"
      size="sm"
      :variant="currentType === '关系类型' ? 'primary' : 'outline-primary'"
      squared
      @click="clickRelationType('关系类型')"
    >
      <i class="el-icon-rank"></i>
      <b-tooltip target="relation-type" placement="right">关系类型</b-tooltip>
    </b-button>
  </div>
</template>

<script>

export default {
  props: [
    'clickNodeType',
    'clickRelationType',
    'currentType',
    'openAddNodeTypeModal',
    'openAddRelationTypeModal'
  ]
}
</script>

<style lang="stylus" scoped>
.side-bar
  width: 60px
  height: 100%
  box-sizing: border-box
  padding: 20px 0px
  text-align: left
  background-color: #e9ecef
  text-align: center
.btn
  display: inline-block
  margin-bottom: 20px
  font-size: 18px
</style>
